<template>
	<!-- 新增任务弹窗 -->
	<uni-popup ref="taskPopup" type="center">
		<view class="task-popup-content">
			<view class="task-popup-header">
				<text class="task-popup-title">添加任务</text>
			</view>
			<view class="task-popup-body">
				<uni-forms :model="newTask" ref="taskRef">
					<uni-forms-item label="名称" required>
						<uni-easyinput v-model="newTask.taskName" placeholder="请输入任务标题" clearable maxlength="15" />
					</uni-forms-item>
					<uni-forms-item label="图标" required>
						<uni-data-select v-model="newTask.icon" :localdata="iconOptions" placeholder="请选择任务图标" />
					</uni-forms-item>
					<uni-forms-item label="标签" required>
						<uni-easyinput v-model="newTask.tags" placeholder="输入任务标签" clearable maxlength="10" />
					</uni-forms-item>
					<!-- 分数 -->
					<uni-forms-item label="分数" required>
						<uni-number-box v-model="newTask.score" placeholder="请输入任务分数" :min="1" :max="100" />
					</uni-forms-item>
				</uni-forms>
				<view class="task-popup-footer">
					<button class="task-cancel-button" @click="handleClosePopup">取消</button>
					<button class="task-confirm-button" @click="handleSubmitNewTask">确定</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { ref, defineEmits, defineExpose, computed } from 'vue';
	import { addTaskAPI } from '../../../services/task';
	import { TaskItem } from '../../../types/task';

	// 定义事件
	const emit = defineEmits<{
		taskAdded : [];
	}>();

	// 新增任务弹窗引用
	const taskPopup = ref();
	// 可用图标列表
	const availableIcons = ref(['📚', '🏃', '💧', '📝', '📖', '🧹', '🧘', '📰', '🤸', '📬', '📋']);

	// 转换为 uni-data-select 需要的格式
	const iconOptions = computed(() => {
		return availableIcons.value.map(icon => ({
			value: icon,
			text: icon
		}));
	});
	// 新任务数据 TaskItem类型
	const newTask = ref<TaskItem>({
		taskName: '',
		icon: '',
		score: 1,
		tags: '',
		status: 0
	});


	/**
	 * 打开弹窗
	 */
	const openPopup = () => {
		// 重置表单
		resetForm();
		// 打开弹窗
		taskPopup.value.open();
	};
	/**
	 * 重置表单
	 */
	const resetForm = () => {
		newTask.value = {
			taskName: '',
			icon: '',
			score: 0,
			tags: '',
			status: 0
		}
	}

	/**
	 * 关闭弹窗
	 */
	const handleClosePopup = () => {
		taskPopup.value.close();
	};




	/**
	 * 提交新任务
	 */
	const handleSubmitNewTask = async () => {

		try {
			// 调用后端API添加任务
			await addTaskAPI(newTask.value);

			// 触发任务添加成功事件，通知父组件刷新列表
			emit('taskAdded');

			// 显示成功提示
			uni.showToast({
				title: '任务添加成功',
				icon: 'success'
			});

			// 关闭弹窗
			handleClosePopup();
		} catch (error) {
			console.error('添加任务失败:', error);
			uni.showToast({
				title: '添加任务失败',
				icon: 'none'
			});
		}
	};

	// 暴露方法给父组件
	defineExpose({
		openPopup,
		handleClosePopup
	});
</script>

<style scoped>
	/* 任务弹窗样式 */
	.task-popup-content {
		width: 90vw;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.task-popup-header {
		padding: 30rpx 0;
		text-align: center;
		border-bottom: 1rpx solid #eee;
	}

	.task-popup-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.task-popup-body {
		padding: 30rpx;
	}



	.task-popup-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		padding-top: 20rpx;
	}

	.task-cancel-button,
	.task-confirm-button {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
		margin: 0 10rpx;
	}

	/* 适配 uni-forms 样式 */
	.uni-forms {
		width: 100%;
	}

	.uni-forms-item {
		margin-bottom: 24rpx !important;
	}

	.uni-input,
	.uni-easyinput {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 8rpx !important;
	}

	/* 确保 uni-data-select 宽度固定 */
	.uni-data-select {
		width: 100% !important;
	}

	/* 确保 uni-number-box 宽度固定 */
	.uni-number-box {
		width: 100% !important;
	}

	.task-cancel-button {
		background-color: #f5f5f5;
		color: #666;
	}

	.task-confirm-button {
		background-color: #007aff;
		color: #fff;
	}
</style>